<template>
	<uni-nav-bar dark :fixed="true" shadow background-color="#fff" status-bar left-icon="left" left-text="" title="退出登录" @clickLeft="back" />
	<view class="main-setting">
		<!-- <view class="setting-item">
			<text class="title">头像：</text>
			<cropper selWidth="400rpx" selHeight="400rpx" @upload="myUpload" :avatarSrc="state.userInfo.avatar_url" avatarStyle="width:100rpx;height:100rpx;"></cropper>
		</view>
		<view class="setting-item">
			<text class="title">昵称：</text>
			<view class="input" @click="user()">
				<text class="name">{{state.userInfo.nickname}}</text>
				<image src="../../../static/my/详情@2x.png" mode=""></image>
			</view>
		</view>
		<view class="setting-item">
			<text class="title">手机号：</text>
			<view class="input" @click="phone()">
				<text class="name">{{state.userInfo.phone? state.userInfo.phone : '去绑定'}}</text>
				<image src="../../../static/my/详情@2x.png" mode=""></image>
			</view>
		</view>
		<view class="setting-item">
			<text class="title">密码：</text>
			<view class="input" @click="password()">
				<text class="name">**********</text>
				<image src="../../../static/my/详情@2x.png" mode=""></image>
			</view>
		</view> -->
		<view class="setting-button" @click="loOut()">退出登录</view>
	</view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { loginOut } from "@/request/api/login.js";
import { changeava } from "@/request/api/my.js";
import cropper  from "@/components/lxiaoxiao-cropper/lxiaoxiao-cropper.vue";
import { useCartStore } from '@/store/cart.js';
const store = useCartStore();

const state = reactive({
	userInfo: {}
})

onLoad((e) => {
	state.userInfo = JSON.parse(e.info);
});

const myUpload = async(e) => {
	const fs = uni.getFileSystemManager();
	fs.readFile({
		filePath: e.path,
		encoding: 'base64',
		success: res => {
			// base64编码字符串
			console.log("data:image/jpeg;base64," + res.data)
		}
	})
	
	// uni.uploadFile({
	// 	url: 'https://niu2.namomei.cn/api/member.Member/avatar',
	// 	filePath: e.path,
	// 	name: 'file',
	// 	success: (res) => {
	// 		console.log(res, '111');
	// 	},
	// 	fail:(res) => {
	// 		console.log(res)
	// 	}
	// });
}

// 授权手机号
const phone = () => {
	uni.navigateTo({
		url: '/pages/my/setting/settingphone'
	})
}

// 设置昵称
const user = () => {
	uni.navigateTo({
		url: `/pages/my/setting/settingUser?name=${state.userInfo.nickname}`
	})
}

// 设置密码
const password = () => {
	uni.navigateTo({
		url: `/pages/my/setting/settingPsd`
	})
}

// 退出登录
const loOut = async() => {
	// const resultData = await loginOut();
	store.setToken('');
	store.setUserInfo({});
	store.clear();
	uni.navigateTo({
		url: '/pages/login/login'
	})
}

const back = () => {
	uni.navigateBack({
		delta: 1
	})
}
</script>

<style lang="scss" scoped>
	.main-setting {
		padding: 0rpx 64rpx;
		margin-top: 20rpx;
		.setting-item {
			display: flex;
			align-items: center;
			margin-top: 28rpx;
			.avatar {
				width: 100rpx;
				height: 100rpx;
			}
			text {
				width: 30%;
				text-align: right;
			}
			.title {
				width: 110rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1C1919;
				line-height: 36rpx;
			}
			.input {
				flex: 1;
				height: 62rpx;
				border-radius: 14rpx;
				border: 2rpx solid #DDD8D3;
				line-height: 62rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 12rpx 20rpx 14rpx 30rpx;
				box-sizing: border-box;
				text {
					width: 100%;
					text-align: right;
				}
				.title {
					text-align: left;
				}
				.name {
					text-align: left;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1C1919 !important;
				}
				image {
					width: 18rpx;
					height: 30rpx;
				}
			}
		}
		
		.setting-phone {
			width: 332rpx;
			height: 92rpx;
			background: #222222;
			border-radius: 78rpx;
			text-align: center;
			line-height: 92rpx;
			color: #fff;
			margin: 0 auto;
			margin-top: 300rpx;
			font-size: 28rpx;
		}
		
		.setting-button {
			position: fixed;
			bottom: 100rpx;
			width: 638rpx;
			height: 92rpx;
			background: #000000;
			border-radius: 46rpx;
			line-height: 92rpx;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
		}
	}
</style>